<script setup>
import { ref } from 'vue'
import { useEcharts } from '../../js/useEcharts'
import { useOptions } from '../commonOption/option'
const { chartRoundOptionsOne, chartRoundOptionsTwo,chartRoundOptionsThree } = useOptions()
const chartRoundContainer = ref(null)
const { chart, updateChart } = useEcharts(chartRoundContainer, chartRoundOptionsOne)

// 第二个echarts配置
const chartRoundContainerTwo = ref(null)
const res = useEcharts(chartRoundContainerTwo, chartRoundOptionsTwo)

// 第三个Echarts配置
const chartRoundContainerThree = ref(null)
const res3 = useEcharts(chartRoundContainerThree, chartRoundOptionsThree)
</script>

<template>
  <div class="left">
    <div class="bgcolor"></div>
    <div class="custom">
      <div class="top">
        <div class="realtime">
          <div class="title">实时游客统计</div>
          <img src="../../images/dataScreen-title.png" alt="" />
        </div>
        <div class="preview-people">可预约总数<span style="color: bisque; font-style: italic">999999</span>人</div>
      </div>
      <div class="total">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>人</span>
      </div>
      <div class="picture">
        <div ref="chartRoundContainer" style="width: 100%; height: 350px; transform: translateY(-68px)"></div>
      </div>
    </div>
    <div class="gender">
      <div class="top">
        <div class="title">男女比例</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
      <div class="main">
        <div class="male">
          <span>男士</span>
          <img src="../../images/man.png" alt="" />
        </div>
        <div class="female">
          <span>女士</span>
          <img src="../../images/woman.png" alt="" />
        </div>
      </div>
      <div class="bottom">
        <div class="n-v">
          <span style="color: #fff">男士&nbsp;&nbsp;&nbsp;60%</span>
          <span style="color: #fff">女士&nbsp;&nbsp;&nbsp;40%</span>
        </div>
        <!-- echarts -->
        <div ref="chartRoundContainerTwo" style="width: 80%; height: 150px; transform: translateY(10px);"></div>
      </div>
    </div>
    <div class="age">
       <div class="top">
        <div class="title">年龄比例</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
        <div ref="chartRoundContainerThree" style="width: 360px;height: 250px;margin: auto;"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.left {
  width: 360px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 30px;
  .bgcolor {
    width: 100%;
    height: 30px;
    background-image: url('../../images/dataScreen-header-left-bg.png');
  }
  .custom {
    width: 360px;
    height: 300px;
    background-image: url('../../images/dataScreen-main-lt.png');
    display: flex;
    flex-direction: column;
    .top {
      position: relative;
      width:360px;
      height: 45px;
      // background-color: gray;
      display: flex;
      .realtime {
        .title {
          color: white;
          font-size: 16px;    
          font-family: YouSheBiaoTiHei;
          margin-bottom: 6px;
          font-weight: 600;
          font-style: italic;
        }
      }
      .preview-people {
        position: absolute;
        right: 5px;
        bottom: 0;
        color: #fff;
        font-size: 14px;
      }
    }
    .total {
      width: 100%;
      height: 80px;
      padding: 20px 10px;
      display: flex;
      justify-content: space-evenly;
      span {
        background-color: palegoldenrod;
        width: 40px;
        height: 39px;
        background-image: url('../../images/total.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        color: #66ffff;
        font-size: 24px;
        text-align: center;
        line-height: 40px;
      }
    }
    .picture {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }
  .gender {
    width: 100%;
    height: 300px;
    background-image: url('../../images/dataScreen-main-lt.png');
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 45px;
      .title {
        color: white;
        font-size: 16px;
        font-family: YouSheBiaoTiHei;
        margin-bottom: 6px;
        font-weight: 600;
        font-style: italic;
      }
    }
    .main {
      width: 100%;
      height: 150px;
      box-sizing: border-box;
      padding: 10px 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        color: white;
      }
      .male {
        width: 100px;
        height: 100px;
        background: url('../../images/man-bg.png') no-repeat center center / contain;
        text-align: center;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 2px 0 10px 0;
      }
      .female {
        width: 100px;
        height: 100px;
        background-color: gold;
        background: url('../../images/woman-bg.png') no-repeat center center / contain;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 2px 0 10px 0;
      }
    }
    .bottom {
      width: 100%;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .n-v {
        position: absolute;
        top: 10px;
        left: 65px;
        width: 65%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .age {
    width: 100%;
    height: 300px;
    background-image: url('../../images/dataScreen-main-lt.png');
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    .top {
      width: 100%;
      height: 45px;
      .title {
        color: white;
        font-size: 16px;
        font-family: YouSheBiaoTiHei;
        margin-bottom: 6px;
        font-weight: 600;
        font-style: italic;
      }
    }
  }
}
</style>
